<template>
  <view class="flex-col " style="position: relative;z-index:999999">
    <view class="flex-col section_1 u-row-right">
      <view class="flex-col section_2">
        <view class="justify-center group">
          <view class="flex-row">
            <image
              src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557827022242805495.png"
              class="image image_1"
            />
            <text class="text">优惠</text>
            <image
              src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557827022700765865.png"
              class="image image_2"
            />
          </view>
          <image @click="$emit('close')"
            src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557827017666502206.png"
            class="image_3"
          />
        </view>
		<scroll-view scroll-y="true"  style="height:800rpx">
			<view class="flex-col list">
			  <view class="flex-row list-item" :key="i" v-for="(item, i) in list">
			    <view class="flex-row">
			      <view class="flex-col group_3">
			        <view class="flex-row">
			          <text class="text_1">￥</text>
			          <text class="text_3">{{item.couponsAmount?item.couponsAmount:0}}</text>
			        </view>
			        <text class="text_5">{{item.couponsTypeName}}</text>
			      </view>
			      <view class="section_4"><!--*--></view>
			    </view>
			    <view class="flex-col group_5">
			      <text class="text_7">满{{item.couponsCondition}}元可用</text>
			      <text class="text_9">有效期至：{{item.deadline}}</text>
				  <text class="text_9" v-if="isOpen[i]">{{item.couponsDescribe}}</text>
			      <view class="flex-row  group_6 u-col-center" @click="open(i)">
			        <text class="text_11">详细信息</text>
			        <u-icon name="arrow-up" size="24" v-if="isOpen[i]"></u-icon>
					  <u-icon name="arrow-down" size="24" v-if="!isOpen[i]"></u-icon>
			      </view>
			    </view>
			
				<view class="flex-row items-center u-flex-1 u-row-right u-m-r-40"  v-if="!item.isLate && item.usingState==0">
					 <view v-if="amount>item.couponsCondition" class="flex-row  text-wrapper"><text class="text_13" @click="goUser(item.couponsAmount,item.id,item.couponsId)">去使用</text></view>
					  <view v-else class="flex-row  text-wrapper-1"><text class="text_13" >不满足条件</text></view>
				</view>
				<view class="flex-row items-center u-flex-1 u-row-right u-m-r-40"  v-if="item.isLate==1 && item.usingState==1">
				<view class="flex-row  text-wrapper-1"><text class="text_13" >已使用</text></view>
				</view>
				<view class="flex-row items-center u-flex-1 u-row-right u-m-r-40"  v-if="item.isLate==1">
				<view class="flex-row  text-wrapper-1"><text class="text_13" >已过期</text></view>
				</view>
			  
			  </view>
			</view>
		</scroll-view>

      </view>
    </view>
  </view>
</template>

<script>
  export default {
    components: {},
	name:'shop-coupon',
	props:{
		list:{
			type:Array,
			default:function()
			{
				return [];
			}
		},
		amount:{
			type:[String,Number],
			default:0
		}
	},
	
	mounted() {
	   this.list.map(item=>{
		   this.isOpen.push(false);
	   })	;
	   this.price=this.amount;
	},
    data() {
      return {
		  price:0,
          isOpen:[]
      };
    },

    methods: {
		goUser(amount,id,couponsId)
		{
			this.$emit('confirm',{
				coupon_id:id,
				amount:amount,
				couponsId:couponsId
			});
		},
		open(index)
		{
			this.isOpen.splice(index,1,!this.isOpen[index]);
			console.log(this.isOpen);
		}
	},
  };
</script>

<style scoped lang="scss">
  .list-item {
    padding: 30rpx 4.5rpx;
    filter: drop-shadow(0px 4rpx 2rpx #00000029);
    background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557827025245536815.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: relative;
  }
  .image {
    flex-shrink: 0;
    width: 28rpx;
    height: 10rpx;
  }
  .group_5 {
    margin-left: 32.5rpx;
  }
  .text-wrapper {
    display: flex;
	justify-content: center;
	align-items: center;
    background-color: #fe641a;
    border-radius: 28rpx;
    width: 136rpx;
    height: 56rpx;
  
  }
  .text-wrapper-1 {
    display: flex;
  	justify-content: center;
  	align-items: center;
    background-color: #cccccc;
    border-radius: 38rpx;
    padding: 10px 20rpx;
  }
  .group_3 {
    margin-top: 7.5rpx;
    padding: 0 33.5rpx;
  }
  .section_4 {
    margin-bottom: 2.5rpx;
    background-image: repeating-linear-gradient(
      0deg,
      #999999,
      #999999 8.47457627118644%,
      transparent 8.47457627118644%,
      transparent 11.864406779661016%
    );
    width: 1rpx;
    height: 118rpx;
  }
  .text_7 {
    align-self: flex-start;
    color: #333333;
    font-size: 28rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 33rpx;
  }
  .text_9 {
    margin-top: 24rpx;
    color: #333333;
    font-size: 22rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 26rpx;
  }
  .group_6 {
    margin-top: 26rpx;
    height: 24rpx;
  }
  .text_13 {
    color: #ffffff;
    font-size: 24rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 28rpx;
  }
  .text_5 {
    margin-left: 9rpx;
    color: #333333;
    font-size: 24rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 28rpx;
  }
  .text_11 {
    color: #666666;
    font-size: 20rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 23rpx;
  }
  .image_4 {
   
    width: 14rpx;
    height: 14rpx;
  }
  .text_1 {
    align-self: center;
    color: #fe641a;
    font-size: 24rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 28rpx;
  }
  .text_3 {
    margin-left: 4rpx;
    color: #fe641a;
    font-size: 72rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 85rpx;
  }
  .page {
    background-color: #ffffffff;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
  }
  .section_1 {
    height: 100vh;
    background-color: #00000099;
	position: fixed;
	bottom: 0;
	right: 0;
	left: 0;

  }
  .section_2 {
    padding: 36rpx 24rpx 48rpx;
    background-image: linear-gradient(180deg, #ffffff 0%, #ffffff 0%, #f5f6f8 17.38%, #f5f6f8 100%);
    border-radius: 24rpx 24rpx 0px 0px;
	height: 900rpx;
	min-height: 900rpx;
  }
  .group {
    padding: 0 8rpx 6rpx;
    position: relative;
  }
  .list {
    margin-top: 37rpx;
  }
  .image_3 {
    position: absolute;
    right: 8rpx;
    top: 50%;
    transform: translateY(-50%);
    width: 40rpx;
    height: 40rpx;
  }
  .list-item:not(:first-of-type) {
    margin-top: 32rpx;
  }
  .image_1 {
    margin-top: 24rpx;
  }
  .text {
    margin-left: 33rpx;
    color: #333333;
    font-size: 36rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 43rpx;
  }
  .image_2 {
    margin-left: 31rpx;
    margin-top: 24rpx;
  }
</style>